import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getNewsByIdAction } from '../store/action/news';

/*
  学习目标：存储数据，渲染界面
 
*/

export function News() {
  const { current } = useSelector((state) => state.channel);
  const { list } = useSelector((state) => state.news);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getNewsByIdAction(current));
  }, [current, dispatch]);
  return (
    <div className="list">
      {list.map((item) => (
        <div key={item.art_id} className="article_item">
          <h3 className="van-ellipsis">{item.title}</h3>
          <div className="img_box">
            <img src={item.cover.images ? item.cover.images[0] : ""} className="w100" alt="" />
            {/* <img src={item.cover.images[0]} className="w100" alt="" /> */}
          </div>
          <div className="info_box">
            <span>{item.aut_name}</span>
            <span>{item.comm_count}评论</span>
            <span>{item.pubdate}</span>
          </div>
        </div>
      ))}
    </div>
  );
}
